<template>
    <el-row >
        <el-col :span="2">
            <el-button type="primary" plain @click="toTeam">团队</el-button>
        </el-col>
        <el-col :span="2">
            <el-button type="primary" plain @click="toTask">任务</el-button>
        </el-col>
       
    </el-row>
    <el-divider />
    <el-row>
       
        <el-col :span="10"></el-col>
        <el-col :span="4">
          
        </el-col>
        <el-col :span="4">
            <el-select
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                :reserve-keyword="false"
                placeholder="添加项目成员"
            >
    <el-option
      v-for="(item,index) in options"
      :key="index"
      :label="item.username"
      :value="item.id"
    />
    </el-select>        
        </el-col>
        <el-col :span="2">
        
            <el-button  type="success" @click="addTeam">  
                <el-icon><Plus /></el-icon>新增
            </el-button>
        </el-col>
    </el-row>

    <el-table :data="tableData"
      style="width: 75%"
      height="250"
      :default-sort = "{prop: 'serialNumber', order: 'ascending'}"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="serialNumber" sortable label="序号" width="120" />   
        <el-table-column prop="name" label="团队成员" width="120" />
        <el-table-column prop="position" label="职位" width="120" />
        <el-table-column prop="projectName" label="项目名称" width="150" />
        <el-table-column label="操作" fixed="right">
            <template #default="scope">
                <el-button size="small" circle @click="handleEdit(scope.$index, scope.row)"
                >
                    <Edit style="width: 1em; height: 1em; " />
                 </el-button>      
                <el-button 
                size="small"
                type="danger" 
                @click="handleDelete(scope.$index, scope.row)"
                 circle >
                 <el-icon><Delete /></el-icon>
                </el-button> 
            </template>
        </el-table-column>
        
    </el-table>

</template>
<script>


export default{
    data(){
        return{
            value:[],
            options:[],
            tableData:[
                {serialNumber:'1',name:'诸葛孔明', projectName:'j金融',position:'科员'}
              
                
        ]
        }

    },
    methods:{
        toTeam(){
            this.$router.push({
                name:'projectTeam'
            })
        },
        toTask(){
            this.$router.push({
                name:'projectDetails'
            })
        },
        optionList(){
            this.axios({
                method:'post',
                url:'http://localhost:8080/project/messageList',

                
            }).then((response)=>{
                var status=response.status;
                var data=response.data;
                if(status===200){
                    if(data.code==200){
                    
                    this.options=data.data.list;
                   

                    }
                }
            })
        },
        addTeam(){
            console.log(this.value);
            this.axios({
                method:'post',
                url:'http://localhost:8080/team/addTeam',
                params:{
                     id:[1,2]
                }
            }).then((response)=>{
                console.log(response);
            })
        }
    },
    beforeMount(){
        this.optionList();
    }
}
</script>
<style>

</style>